<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kaLBv8Axey6j0ZRMAHaYUhGAKVq4KG9K"></script>
    <title>百度地图多个标注点沿折线的轨迹运动</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // $(document).ready(function () {
    //     $.ajax({
    //         url: 'http://ta.vipgz2.idcfengye.com/EPServer/servelt/web/cargo/FindAllTruckLocation?DHTG',
    //         type: 'get',
    //         dataType: 'json',
    //         crossDomain: true,
    //         success: function (data) {
    //             var rows = data.rows;
    //             var rid = [...];
    //             var lon1 = [];
    //             var lat1 = [];
    //             var lon2 = [];
    //             var lat2 = [];
    //             var lon3 = [];
    //             var lat3 = [];
    //             for(var i=0;i<rows.length;i++){
    //                 if(rows.rid == rid[0]){
    //                     lon1[i] = rows[i].longitude;
    //                     lat1[i] = rows[i].latitude;
    //                 }
    //                 else if(rows.rid == rid[1]){
    //                     lon2[i] = rows[i].longitude;
    //                     lat2[i] = rows[i].latitude;
    //                 }
    //                 else{
    //                     ...
    //                 }
    //             }
    //         }
    //     });
    // });

    lon1 = [116.363737,116.362012,116.421804,116.414905];
    lat1 = [39.913607,39.948574,39.955211,39.983081];
    lon2 = [116.404556,116.438476,116.500567,116.494818];
    lat2 = [39.913164,39.885709,39.873306,39.946361];

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());

    var bounds = null;
    var linesPoints = null;
    var spoi1 = new BMap.Point(lon1[0],lat1[0]);    // 起点1
    var spoi2 = new BMap.Point(lon2[0], lat2[0]);    // 起点2
    var epoi1 = new BMap.Point(lon1[3], lat1[3]);    // 终点1
    var epoi2 = new BMap.Point(lon2[3],lat2[3]);    // 终点2
    var p11 = new BMap.Point(lon1[1],lat1[1]);    // 1经过点1
    var p12 = new BMap.Point(lon1[2],lat1[2]);    // 1经过点2
    var p21 = new BMap.Point(lon2[1],lat2[1]);    // 2经过点1
    var p22 = new BMap.Point(lon2[2],lat2[2]);    // 2经过点2
    var myIcon = new BMap.Icon("car.png", new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)});

    function initLine() {
        bounds = new Array();
        linesPoints = new Array();
        map.clearOverlays();                                                    // 清空覆盖物
        var driving3 = new BMap.DrivingRoute(map, {onSearchComplete: drawLine});  // 驾车实例,并设置回调
        driving3.search(spoi1, epoi1, {waypoints:[p11,p12]});                                       // 搜索一条线路
        var driving4 = new BMap.DrivingRoute(map, {onSearchComplete: drawLine});  // 驾车实例,并设置回调
        driving4.search(spoi2, epoi2, {waypoints:[p21,p22]});                                       // 搜索一条线路
    }

    function run() {
        for (var m = 0; m < linesPoints.length; m++) {
            var pts = linesPoints[m];
            var len = pts.length;
            var carMk = new BMap.Marker(pts[0], {icon: myIcon});
            map.addOverlay(carMk);
            resetMkPoint(1, len, pts, carMk)
        }

        function resetMkPoint(i, len, pts, carMk) {
            carMk.setPosition(pts[i]);
            if (i < len) {
                setTimeout(function () {
                    i++;
                    resetMkPoint(i, len, pts, carMk);
                }, 100);
            }
        }

    }

    function drawLine(results) {
        var opacity = 0.45;
        var planObj = results.getPlan(0);
        var b = new Array();
        var addMarkerFun = function (point, imgType, index, title) {
            var url;
            var width;
            var height;
            var myIcon;
            // imgType:1的场合，为起点和终点的图；2的场合为车的图形
            if (imgType == 1) {
                url = "dest_markers.png";
                width = 42;
                height = 34;
                myIcon = new BMap.Icon(url, new BMap.Size(width, height), {
                    offset: new BMap.Size(14, 32),
                    imageOffset: new BMap.Size(0, 0 - index * height)
                });
            } else {
                url = "trans_icons.png";
                width = 22;
                height = 25;
                var d = 25;
                var cha = 0;
                var jia = 0
                if (index == 2) {
                    d = 21;
                    cha = 5;
                    jia = 1;
                }
                myIcon = new BMap.Icon(url, new BMap.Size(width, d), {
                    offset: new BMap.Size(10, (11 + jia)),
                    imageOffset: new BMap.Size(0, 0 - index * height - cha)
                });
            }

            var marker = new BMap.Marker(point, {icon: myIcon});
            if (title != null && title != "") {
                marker.setTitle(title);
            }
            // 起点和终点放在最上面
            if (imgType == 1) {
                marker.setTop(true);
            }
            map.addOverlay(marker);
        };
        var addPoints = function (points) {
            for (var i = 0; i < points.length; i++) {
                bounds.push(points[i]);
                b.push(points[i]);
            }
        };
        // 绘制驾车步行线路
        for (var i = 0; i < planObj.getNumRoutes(); i++) {
            var route = planObj.getRoute(i);
            if (route.getDistance(false) <= 0) {
                continue;
            }
            addPoints(route.getPath());
            // 驾车线路
            if (route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING) {
                map.addOverlay(new BMap.Polyline(route.getPath(), {
                    strokeColor: "#0030ff",
                    strokeOpacity: opacity,
                    strokeWeight: 6,
                    enableMassClear: true
                }));
            } else {
                // 步行线路有可能为0
                map.addOverlay(new BMap.Polyline(route.getPath(), {
                    strokeColor: "#30a208",
                    strokeOpacity: 0.75,
                    strokeWeight: 4,
                    enableMassClear: true
                }));
            }
        }
        map.setViewport(bounds);
        // 终点
        addMarkerFun(results.getEnd().point, 1, 1);
        // 开始点
        addMarkerFun(results.getStart().point, 1, 0);
        linesPoints[linesPoints.length] = b;
    }

    initLine();
    setTimeout(function () {
        run();
    }, 3000);
</script>
